<template>
  <!-- 顶部导航栏 -->
  <header class="top-nav">
    <img src="/logo.png" alt="" class="logoimg" />
    <div class="user-actions">
      <a href="#">登录</a>
      <a href="#">注册</a>
    </div>
  </header>

  <!-- 主要内容区域 -->
  <div class="main-content">
    <!-- 左侧边栏导航 -->
    <aside class="sidebar">
      <nav class="side-nav">
        <ul>
          <li>
            <a href="#" @click.prevent="toggleSubmenu('user')">用户管理模块</a>
            <ul v-show="activeSubmenu === 'user'" class="submenu">
              <li>
                <a href="#" @click.prevent="changeComponent('UserInfo', 'UserInfo')" :class="{ active: selectedItem === 'UserInfo' }">用户信息管理</a>
              </li>
              <li>
                <a href="#" @click.prevent="changeComponent('UserBehavior', 'UserBehavior')" :class="{ active: selectedItem === 'UserBehavior' }"
                  >用户行为分析</a
                >
              </li>
              <li>
                <a
                  href="#"
                  @click.prevent="changeComponent('UserPermission', 'UserPermission')"
                  :class="{ active: selectedItem === 'UserPermission' }"
                  >用户权限管理</a
                >
              </li>
              <li>
                <a href="#" @click.prevent="changeComponent('UserFeedback', 'UserFeedback')" :class="{ active: selectedItem === 'UserFeedback' }"
                  >用户反馈处理</a
                >
              </li>
            </ul>
          </li>
          <li>
            <a href="#" @click.prevent="toggleSubmenu('goods')">商品管理模块</a>
            <ul v-show="activeSubmenu === 'goods'" class="submenu">
              <li>
                <a href="#" @click.prevent="changeComponent('PetProducts', 'PetProducts')" :class="{ active: selectedItem === 'PetProducts' }"
                  >宠物商品管理</a
                >
              </li>
              <li>
                <a
                  href="#"
                  @click.prevent="changeComponent('ProductCategory', 'ProductCategory')"
                  :class="{ active: selectedItem === 'ProductCategory' }"
                  >商品分类管理</a
                >
              </li>
              <li>
                <a href="#" @click.prevent="changeComponent('ProductStatus', 'ProductStatus')" :class="{ active: selectedItem === 'ProductStatus' }"
                  >商品上下架管理</a
                >
              </li>
              <li>
                <a href="#" @click.prevent="changeComponent('ProductReview', 'ProductReview')" :class="{ active: selectedItem === 'ProductReview' }"
                  >商品评价管理</a
                >
              </li>
            </ul>
          </li>
          <li>
            <a href="#" @click.prevent="toggleSubmenu('order')">订单管理模块</a>
            <ul v-show="activeSubmenu === 'order'" class="submenu">
              <li>
                <a
                  href="#"
                  @click.prevent="changeComponent('OrderProcessing', 'OrderProcessing')"
                  :class="{ active: selectedItem === 'OrderProcessing' }"
                  >订单处理</a
                >
              </li>
              <li>
                <a
                  href="#"
                  @click.prevent="changeComponent('ReturnManagement', 'ReturnManagement')"
                  :class="{ active: selectedItem === 'ReturnManagement' }"
                  >退换货管理</a
                >
              </li>
              <li>
                <a href="#" @click.prevent="changeComponent('Logistics', 'Logistics')" :class="{ active: selectedItem === 'Logistics' }">物流管理</a>
              </li>
              <li>
                <a href="#" @click.prevent="changeComponent('Payment', 'Payment')" :class="{ active: selectedItem === 'Payment' }">支付管理</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" @click.prevent="toggleSubmenu('data')">数据分析模块</a>
            <ul v-show="activeSubmenu === 'data'" class="submenu">
              <li>
                <a href="#" @click.prevent="changeComponent('SalesStats', 'SalesStats')" :class="{ active: selectedItem === 'SalesStats' }"
                  >销售统计</a
                >
              </li>
              <li>
                <a href="#" @click.prevent="changeComponent('UserAnalysis', 'UserAnalysis')" :class="{ active: selectedItem === 'UserAnalysis' }"
                  >用户分析</a
                >
              </li>
              <li>
                <a
                  href="#"
                  @click.prevent="changeComponent('TrafficAnalysis', 'TrafficAnalysis')"
                  :class="{ active: selectedItem === 'TrafficAnalysis' }"
                  >流量分析</a
                >
              </li>
              <li>
                <a
                  href="#"
                  @click.prevent="changeComponent('FinancialReports', 'FinancialReports')"
                  :class="{ active: selectedItem === 'FinancialReports' }"
                  >财务报表</a
                >
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </aside>

    <!-- 右侧内容区域 -->
    <div class="content-area">
      <component :is="currentComponent"></component>
    </div>
  </div>
</template>

<script>
import User from "../manageUser/UserInfo.vue";
import Goods from "../manageGoods/goods.vue";
import Order from "../manageOrder/order.vue";
import Data from "../manageData/data.vue";

// Import sub-components
import UserInfo from "../manageUser/UserInfo.vue";
import UserBehavior from "../manageUser/UserBehavior.vue";
import UserPermission from "../manageUser/UserPermission.vue";
import UserFeedback from "../manageUser/UserFeedback.vue";

import PetProducts from "../manageGoods/PetProducts.vue";
import ProductCategory from "../manageGoods/ProductCategory.vue";
import ProductStatus from "../manageGoods/ProductStatus.vue";
import ProductReview from "../manageGoods/ProductReview.vue";

import OrderProcessing from "../manageOrder/OrderProcessing.vue";
import ReturnManagement from "../manageOrder/ReturnManagement.vue";
import Logistics from "../manageOrder/Logistics.vue";
import Payment from "../manageOrder/Payment.vue";

import SalesStats from "../manageData/SalesStats.vue";
import UserAnalysis from "../manageData/UserAnalysis.vue";
import TrafficAnalysis from "../manageData/TrafficAnalysis.vue";
import FinancialReports from "../manageData/FinancialReports.vue";

export default {
  name: "Index",
  components: {
    User,
    Goods,
    Order,
    Data,
    // Sub-components
    UserInfo,
    UserBehavior,
    UserPermission,
    UserFeedback,
    PetProducts,
    ProductCategory,
    ProductStatus,
    ProductReview,
    OrderProcessing,
    ReturnManagement,
    Logistics,
    Payment,
    SalesStats,
    UserAnalysis,
    TrafficAnalysis,
    FinancialReports,
  },
  data() {
    return {
      currentComponent: "UserInfo", // Default to first submenu item
      activeSubmenu: "user", // Default to user management expanded
      selectedItem: "UserInfo", // Track the selected menu item
    };
  },
  methods: {
    changeComponent(componentName, itemName) {
      this.currentComponent = componentName;
      this.selectedItem = itemName;
    },
    toggleSubmenu(menu) {
      if (this.activeSubmenu === menu) {
        this.activeSubmenu = null;
      } else {
        this.activeSubmenu = menu;
        // Change to the first sub-component when expanding the menu
        const firstSubComponents = {
          user: "UserInfo",
          goods: "PetProducts",
          order: "OrderProcessing",
          data: "SalesStats",
        };
        this.currentComponent = firstSubComponents[menu];
        this.selectedItem = firstSubComponents[menu];
      }
    },
  },
};
</script>

<style>
/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 添加最小宽度约束 */
body {
  min-width: 1200px; /* 设置一个合适的最小宽度 */
  overflow-x: auto; /* 当内容超出时显示横向滚动条 */
}

/* 顶部导航栏样式 */
.top-nav {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f4efd2;
  color: white;
  min-width: 1200px; /* 与body保持一致 */
}

.logoimg {
  width: 10%;
  height: auto;
  min-width: 100px; /* 防止logo过度缩小 */
}

.user-actions a {
  color: black;
  text-decoration: none;
  margin-right: 20px;
}

/* 主要内容区域 */
.main-content {
  display: flex;
  height: calc(100vh - 80px);
  min-height: calc(100vh - 120px);
  background-color: #efefef;
  min-width: 1200px; /* 与body保持一致 */
}

/* 左侧边栏 */
.sidebar {
  width: 16%;
  min-width: 200px; /* 设置最小宽度防止过度缩小 */
  background-color: #f5f5eb;
  padding: 30px;
  border-right: 1px solid #ddd;
  overflow-y: auto; /* 如果内容过多可以垂直滚动 */
}

.side-nav ul {
  list-style: none;
}

.side-nav li {
  margin-bottom: 0.5rem;
}

.side-nav a {
  display: block;
  padding: 0.5rem;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
  white-space: nowrap; /* 防止文字换行 */
}

.side-nav a:hover {
  background-color: #f4efd2;
}

/* 新增：选中菜单项的样式 */
.side-nav a.active {
  background-color: #eae2b5;
  font-weight: bold;
  color: #000;
}

/* 右侧内容区域 */
.content-area {
  width: 84%;
  min-width: 1000px; /* 设置最小宽度 */
  padding: 50px;
  margin: 25px;
  background-color: white;
  box-shadow: 5px 5px 10px #ddd;
  overflow-y: auto;
  overflow-x: auto; /* 如果内容过多可以横向滚动 */
}

/* 新增子菜单样式 */
.submenu {
  margin-left: 1rem;
}

.submenu a {
  padding-left: 1.5rem;
}

/* 移除原有的媒体查询或修改为只调整细节 */
@media (max-width: 1200px) {
  /* 可以保留一些不影响布局的细节调整 */
  body {
    overflow-x: auto; /* 确保滚动条出现 */
  }
}
</style>
